import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  TextInput,
  View,
  DeviceEventEmitter
} from 'react-native';
import  IconEntypo  from 'react-native-vector-icons/Entypo'; 
import IconIonicons from 'react-native-vector-icons/Ionicons';
import RadioForm, {RadioButton, RadioButtonInput, RadioButtonLabel} from 'react-native-simple-radio-button';
import { inject, observer } from 'mobx-react';
import Toast from 'react-native-root-toast';
import Modal from "react-native-modal";
@inject((stores) => {
    return {
        hatchStore: stores.rootStore.hatchStore 
    }
})
@observer class HatchControlScreen extends React.Component {
    static navigationOptions = {
        title: '孵化',
        headerBackTitle: '返回',
    };
    constructor(props){
		super(props);
        this.state = {
            hatchType: 1,
            num: '0',
            cycle: 30,
            showAboutModal: false
        } 
	}
    componentWillUnmount(){
        DeviceEventEmitter.emit('Hatch');
        DeviceEventEmitter.emit('Home');
    }
    _onPress = () =>{
        const params = {
            num : this.state.num,
            cycle: this.state.cycle,
            type: this.state.hatchType
        }
        this.props.hatchStore.deposit(params,()=>{
            Toast.show('孵化成功',{
                duration: Toast.durations.LONG,
                position: Toast.positions.CENTER,
                shadow: true,
                animation: true,
                hideOnPress: true,
                delay: 10
            })
            this.props.navigation.navigate('Hatch')
        });
    }
    render() {
        return (
            <View style={styles.container}> 
                <View style={styles.titleTxt}>
                    <Text style={styles.c2}><IconEntypo name='dots-three-vertical'></IconEntypo><Text style={styles.titleC2}>孵化信息</Text></Text>
                </View> 
                <View style={styles.result}>
                    <View style={[styles.resultItem,styles.resultBt]}>
                        <Text style={styles.resultLabel}>孵化类型</Text>
                        <RadioForm
                            radio_props={[
                                {
                                    label:'固定锁仓',
                                    value: 1
                                },
                                {
                                    label:'灵活锁仓',
                                    value: 2
                                }
                            ]}
                            initial={0}
                            formHorizontal={true}
                            labelStyle={styles.labelStyle}
                            selectedLabelColor={'#FF7F4B'}
                            borderWidth={1}
                            buttonSize={10}
                            buttonOuterSize={20}
                            buttonColor={'#B9B6B6'}
                            buttonOuterColor={'#B9B6B6'}
                            selectedButtonColor={'#FF7F4B'}
                            onPress={(value) => {this.setState({hatchType: value})}}
                        >
                        </RadioForm>
                    </View>
                    {
                        this.state.hatchType === 1 ?
                        <View style={styles.resultItem}>
                            <Text style={styles.resultLabel}>孵化周期</Text>
                            <RadioForm
                                radio_props={[
                                    {
                                        label:'30天(日化收益0.3%)',
                                        value: 30
                                    },
                                    {
                                        label:'90天(日化收益0.4%)',
                                        value: 90
                                    },
                                    {
                                        label:'180天(日化收益0.56%)',
                                        value: 180
                                    },
                                    {
                                        label:'360天(日化收益0.68%)',
                                        value: 360
                                    }
                                ]}
                                initial={0}
                                formHorizontal={false}
                                labelStyle={styles.labelStyle}
                                selectedLabelColor={'#FF7F4B'}
                                borderWidth={1}
                                buttonSize={10}
                                buttonOuterSize={20}
                                buttonColor={'#B9B6B6'}
                                buttonOuterColor={'#B9B6B6'}
                                selectedButtonColor={'#FF7F4B'}
                                onPress={(value) => {this.setState({cycle:value})}}
                            >
                            </RadioForm>
                        </View>
                        : null
                    }
                    <View style={[styles.resultItem,styles.tc]}>
                        <Text style={styles.resultLabel}>孵化数量</Text>
                        <TextInput
                            style={styles.resultInput}
                            onChangeText={(text) => this.setState({num: text})}
                            value={this.state.num}
                        />
                    </View>
                    <View style={styles.btnItem}>
                        <TouchableOpacity onPress={this._onPress}>
                            <View style={styles.btn}>
                                <Text style={styles.btnTxt}>确定</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.swiperRight}>
						<TouchableOpacity onPress={()=>this.setState({ showAboutModal: true })}>
							<Text style={styles.swiperTxt}>孵化机制</Text>
						</TouchableOpacity>
                    </View>
					{/* </View> */}
                    {/* <View style={styles.notice}>
                        <Text style={styles.noticetxt}>
                            备注：
                        </Text>
                        {
                            this.state.hatchType === 2 ?
                            <View> 
                                <Text style={[styles.noticetxt,styles.noticePd]}>
                                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;1、用户灵活锁仓后，可手动解锁，申请后将在24小时自动解锁。
                                </Text>
                                <Text style={[styles.noticetxt,styles.noticePd]}>
                                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;2、手动解锁后，锁仓收益按锁仓时间起至申请解锁时间计算，按相应的锁仓收益计算。
                                </Text>
                                <Text style={[styles.noticetxt,styles.noticePd]}>
                                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 3、灵活锁仓收益将在解锁后一次性发放收益。申请解锁之后的NSS将不计算锁仓收益,解锁后将不参与抢糖果游戏，也不能享受下级的分成。
                                </Text>
                                <Text style={[styles.noticetxt,styles.noticePd]}>
                                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 如：小明10000枚NSS提至钱包锁仓90天，锁仓后的第31日手动解锁了，那小明的锁仓收益为10000*0.3%*31=930枚NSS，最低锁仓30天才有收益发放。
                                </Text>
                            </View>
                            :
                            <View>
                                <Text style={[styles.noticetxt,styles.noticePd]}>
                                    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;1、固定锁仓收益和分享收益在次日00:30自动发放到锁仓账户。
                                </Text>
                            </View>
                        }
                    </View> */}
                </View>
                <Modal isVisible={this.state.showAboutModal}>
					<View style={styles.modalContainer}>
						<View style={styles.closeBox}>
							<TouchableOpacity onPress={()=>this.setState({
								showAboutModal: false
							})}>
								<IconIonicons name='ios-close' style={styles.modalClose}></IconIonicons>
							</TouchableOpacity>
						</View>
						<View style={styles.txtBox}>
							<Text style={styles.text}>
								新能源NSS挖矿孵化机制详解
							</Text>
							<Text style={styles.text}>
								项目拿出流通2000万的500万NSS新能源币来进行为期3期的挖矿孵化    
							</Text>
							<Text style={styles.text}>
								第一期为200万NSS，第二期为150万NSS  第三期为150万NSS  最低购买 1000个能源链NSS，存入能源链NSS孵化器 进行孵化。
							</Text>
							<Text style={styles.txt}>
								选择30天的每天 0.3%，
							</Text>
							<Text style={styles.text}>
								选择90天的每天 0.4%，
							</Text>
							<Text style={styles.text}>
								选择180天的每天 0.56%，
							</Text>
							<Text style={styles.text}>
								选择 360天的每天 0.68%， 
							</Text>
							<Text style={styles.text}>
								所有的孵化收益NSS和分享收益NSS在次日00:30自动发放，锁仓到期后自动解锁。
							</Text>
						</View>
					</View>
				</Modal>
            </View>
        );
    }
}
const styles = StyleSheet.create({ 
    titleTxt:{
        marginTop: 10,
        marginBottom: 15,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingLeft: 10
    },
    result:{
        paddingLeft: 10,
        paddingRight: 10,
        marginTop: 20
    },
    resultBt:{
        borderTopColor: '#BBBBBB',
        borderTopWidth: 1,
    },
    resultItem:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems:'flex-start',
        paddingTop: 15,
        paddingBottom: 15,
        borderBottomColor: '#BBBBBB',
        borderBottomWidth: 1,
    },
    resultLabel:{
        marginRight: 15,
        color:'#101010',
        fontSize: 14,
        lineHeight: 20
    },
    labelStyle:{
        color:'#B9B6B6',
        fontSize: 14
    },
    btn:{
        marginTop: 20,
        width: '100%',
        backgroundColor:'#FF7F4B',
        height: 40,
        borderRadius: 8,
    },
    btnTxt:{
        color:'#FFFFFF',
        textAlign:'center',
        lineHeight: 40
    },
    resultInput:{
        width: '100%',
        height: 40
    },
    tc:{
        alignItems:'center'
    },
    notice:{
        marginTop: 10,
        padding: 20, 
        fontSize: 9
    },
    noticetxt:{
        fontSize: 9,
        color:'#FF0000'
    },
    noticePd:{
        
    },
	swiperTxt:{
		color:'#FF743D',
		width:'100%',
		textAlign:'left',
		fontSize:14,
		height: 35,
		lineHeight: 35
    },
    modalContainer:{ 
        backgroundColor: 'rgba(232, 229, 229,0.8)',
        padding: 10,
        borderRadius: 8,
        paddingBottom: 20
    },
    closeBox:{
        display:'flex',
        justifyContent:'flex-end',
        alignItems:'flex-end'
    },
    modalClose:{
        color:'#ffffff',
        fontSize:30
	},
	modalMain:{
		padding: 10
	},
	modalContent:{
		marginTop: 20,
		marginBottom: 20,
	},
    text:{
        marginTop: 10,
        color:'#101010'
    },
	modalTime:{
		textAlign:'right'
	}
});
export default HatchControlScreen;